<template>
  <ArtopgroupSearchPopup
    v-model:visible="showSearchPopup"
    teleport="body"
  ></ArtopgroupSearchPopup>
  <ArtopgroupResponsiveMenuMobileMenu
    v-model:visible="showMobileMenuPopup"
    :menuArr="menuArr"
    teleport="body"
  ></ArtopgroupResponsiveMenuMobileMenu>
  <div
    class="fixed top-0 left-0 right-0 h-12 lg:h-20 z-20 bg-white transition-all"
    :class="[
      hideTopNav
        ? 'invisible opacity-0 -translate-y-full'
        : 'visible opacity-100 translate-y-0',
    ]"
  >
    <div class="xl:w-[1280px] xl:m-auto flex flex-row h-full">
      <div class="h-full flex flex-col justify-center pl-5">
        <NuxtImg class="h-6 lg:h-[34px]" :src="`/artopgroup/logo.png`" />
      </div>
      <!-- 水平分辨率至少1024像素时的菜单 -->
      <div class="ml-auto h-full flex-row hidden lg:flex">
        <div class="h-full">
          <ArtopgroupResponsiveMenuPcMenu
            :menuArr="menuArr"
          ></ArtopgroupResponsiveMenuPcMenu>
        </div>
        <div
          class="h-full flex flex-col justify-center items-center px-4 cursor-pointer"
          @click="onShowSearchPopup"
        >
          <nuxt-icon class="text-2xl" name="search" />
        </div>
      </div>
      <!-- 水平分辨率少于1024像素时的菜单 -->
      <div class="ml-auto h-full flex-row flex lg:hidden">
        <div
          class="h-full flex flex-col justify-center items-center px-4 cursor-pointer"
          @click="onShowSearchPopup"
        >
          <nuxt-icon class="text-2xl" name="search" />
        </div>
        <div
          class="h-full flex flex-col justify-center items-center px-4 cursor-pointer mr-5"
          @click="onShowMobileMenuPopup"
        >
          <nuxt-icon class="text-2xl" name="menu" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ArtopgroupResponsiveMenuItem } from "~components/artopgroup/responsive-menu/index.d.ts";

const config = useRuntimeConfig();
const { BASE_PATH } = config.public;
const showSearchPopup = ref<boolean>(false);
function onShowSearchPopup() {
  showSearchPopup.value = true;
}
const showMobileMenuPopup = ref<boolean>(false);
function onShowMobileMenuPopup() {
  showMobileMenuPopup.value = true;
}
const menuArr = ref<ArtopgroupResponsiveMenuItem[]>([
  {
    title: "设计服务与服务设计",
    url: "",
    children: [
      {
        title: "设计(中国)",
        url: "",
        iconUrl: `/artopgroup/pic/07.jpg`,
      },
    ],
  },
  {
    title: "产品研发与供应链",
    url: "",
    children: [
      { title: "供应链整合", url: "" },
      { title: "自动化制造", url: "" },
      { title: "模具设计", url: "" },
    ],
  },
  {
    title: "产品研发与供应链",
    url: "",
    children: [
      { title: "供应链整合", url: "" },
      { title: "自动化制造", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
    ],
  },
  {
    title: "产品研发与供应链",
    url: "",
    children: [
      { title: "供应链整合", url: "" },
      { title: "自动化制造", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
    ],
  },
  {
    title: "产品研发与供应链",
    url: "",
    children: [
      { title: "供应链整合", url: "" },
      { title: "自动化制造", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
    ],
  },
  {
    title: "产品研发与供应链",
    url: "",
    children: [
      { title: "供应链整合", url: "" },
      { title: "自动化制造", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
    ],
  },
  {
    title: "产品研发与供应链",
    url: "",
    children: [
      { title: "供应链整合", url: "" },
      { title: "自动化制造", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
      { title: "模具设计", url: "" },
    ],
  },
  {
    title: "联系我们",
    url: "",
    children: [
      { title: "合作联系", url: "" },
      { title: "全球布局", url: "" },
      { title: "人才招聘", url: "" },
    ],
  },
]);

onMounted(() => {
  init();
});

onBeforeUnmount(() => {
  if (process.client) {
    window.removeEventListener("scroll", onScroll);
  }
});

const hideTopNav = ref<boolean>(false);
let lastScrollTop = 0;
function onScroll(e: Event) {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop >= 200) {
    hideTopNav.value = true;
    if (scrollTop < lastScrollTop) {
      // 是向上滚动
      hideTopNav.value = false;
    } else {
      hideTopNav.value = true;
    }
  } else {
    hideTopNav.value = false;
  }
  lastScrollTop = scrollTop;
}
function init() {
  if (process.client) {
    window.addEventListener("scroll", onScroll);
  }
}
</script>
